<!-- 食材管理 -->
<template>
  <div>
    <el-card style="width: 98%; margin: 0 auto; margin-top: 10px">
      <ELTable v-bind="tableConfig" ref="foodsTable">
        <template #btns="{ deleteAll }">
          <el-button type="success" @click="add">
            <el-icon class="icon">
              <Plus />
            </el-icon>
            新增
          </el-button>
          <el-button type="danger" @click="deleteAll">
            <el-icon class="icon">
              <Delete />
            </el-icon>
            批量删除
          </el-button>
        </template>

        <template #updateTime="{ scope }">
          {{ scope.row.updateTime ? dayjs(scope.row.updateTime).format("YYYY-MM-DD HH:mm") : "" }}
        </template>

        <template #operate="{ scope, deleteHandle }">
          <el-button :icon="Edit" text size="small" class="btn" @click="uploadEdit(scope.row)">
            编辑
          </el-button>
          <el-button
            :icon="Delete"
            text
            size="small"
            class="btn"
            @click="deleteHandle(scope.row.id)"
          >
            删除
          </el-button>
          <el-button
            :icon="Tickets"
            text
            size="small"
            class="btn"
            @click="handelPrice(scope.row.id)"
          >
            价格更新
          </el-button>
          <el-button
            :icon="DataLine"
            text
            size="small"
            class="btn"
            @click="handelAnalyse(scope.row.id)"
          >
            价格分析
          </el-button>
        </template>
      </ELTable>
    </el-card>

    <!-- 添加 -->
    <foodsDialog v-if="dialogVisible" :listParams="listParams" @close="handelClose" />

    <!-- 价格更新 -->
    <priceDialog
      v-if="dialogPrice"
      :priceId="priceId"
      :listData="listData"
      @closePrice="handelClose"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { Tickets, DataLine, Edit, Delete } from "@element-plus/icons-vue";
import ELTable, { TableData } from "@/components/ELTable.vue";
import { foodsList, foodsDel, foodsBatchDel } from "@/api/diet/food/food";
import dayjs from "dayjs";
import foodsDialog from "@/components/diet/foodAdd.vue";
import { foodAddParams, foodsListData, foodPriceAddParams } from "@/api/diet/food/type";
import priceDialog from "@/components/diet/priceUpdate.vue";
import { useRouter } from "vue-router";
const router = useRouter();

const dialogVisible = ref(false);

let listParams = reactive<foodAddParams>({
  id: 0,
  name: "",
  unit: "",
  supplierId: undefined,
});

// 新增
const add = () => {
  listParams = {
    id: 0,
    name: "",
    unit: "",
    supplierId: undefined,
  };
  dialogVisible.value = true;
};

// 修改
const uploadEdit = (row: foodsListData) => {
  listParams = row;
  dialogVisible.value = true;
};

// 价格更新
let priceId = ref(0);
const dialogPrice = ref(false);
const handelPrice = (id: number) => {
  priceId.value = id;
  dialogPrice.value = true;
};

// 价格分析
let listData = reactive<foodPriceAddParams>({
  id: 0,
  foodId: 0,
  wholePrice: "",
  sellPrice: "",
  purchasePrice: "",
  updateTime: "",
});
const handelAnalyse = (id: number) => {
  // console.log(id);
  router.push({ path: "/diet/food-price", query: { id: id } });
};

// 关闭弹框
const foodsTable = ref();
const handelClose = () => {
  dialogVisible.value = false; // 添加食材
  dialogPrice.value = false; // 价格更新
  foodsTable.value.getData();
};

// 表格
const tableConfig = reactive<TableData>({
  loadData: foodsList,
  delete: foodsDel,
  deleteAll: foodsBatchDel,
  columns: [
    {
      label: "序号",
      prop: "id",
    },
    {
      label: "物料名称",
      prop: "name",
    },
    {
      label: "单位",
      prop: "unit",
    },
    {
      label: "供应商",
      prop: "supplierName",
    },
    {
      label: "批发价",
      prop: "wholePrice",
    },
    {
      label: "零售价",
      prop: "sellPrice",
    },
    {
      label: "采购价",
      prop: "purchasePrice",
    },
    {
      label: "价格更新日期",
      prop: "updateTime",
      slot: true,
    },
    {
      prop: "operate",
      label: "操作",
      slot: true,
      attrs: {
        width: 310,
      },
    },
  ],
});
</script>

<style scoped lang="less">
.btn {
  width: 60px;
  color: rgb(64, 158, 255);
  border: none;
}

.btn:nth-of-type(2) {
  color: rgb(245, 108, 127);
}

.btn:nth-of-type(3) {
  margin-right: 10px;
}
</style>
